<!doctype html>
<html dir="$i18n{textdirection}"
      hascustombackground="$i18n{hasCustomBackground}"
      lang="$i18n{language}"
      class="md">
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<title>$i18n{title}</title>
<link rel="icon" type="image/svg+xml" href="../../../../ui/webui/resources/images/incognito_icon.svg">
<meta name="viewport" content="width=device-width">
<link id="incognitothemecss" rel="stylesheet">
<script>
// Until themes can clear the cache, force-reload the theme stylesheet.
document.querySelector('#incognitothemecss').href =
    'chrome://theme/css/incognito_tab_theme.css?' + Date.now();
</script>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="revamped_incognito_tab.css">
</head>
<body>
<div class="content">
  <div class="icon" role="presentation" alt=""></div>
  <h1>$i18n{incognitoTabHeading}</h1>
  <div id="descriptions-wrapper">
    <div class="descriptions first">
      <h2>$i18nRaw{incognitoDoesHeader}</h2>
      $i18nRaw{incognitoDoesDescription}
    </div>
    <div class="descriptions">
      <h2>$i18nRaw{incognitoDoesNotHeader}</h2>
      $i18nRaw{incognitoDoesNotDescription}
    </div>
  </div>
  <div class="learn-more-wrapper">$i18nRaw{learnMore}</div>
  <div id="cookie-controls">
    <div id="cookie-controls-description">
      <em>$i18n{cookieControlsTitle}</em>
      $i18n{cookieControlsDescription}
    </div>
    <cr-tooltip-icon id="cookie-controls-tooltip-icon"
        icon-aria-label="$i18n{cookieControlsTitle}"
        icon-class="$i18n{cookieControlsToolTipIcon}"
        tooltip-text="$i18n{cookieControlsTooltipText}"
        role="link" style="cursor: pointer;" $i18n{hideTooltipIcon}>
    </cr-tooltip-icon>
    <cr-toggle id="cookie-controls-toggle"
               aria-label="$i18n{cookieControlsTitle}"
               $i18n{cookieControlsToggleChecked} dark></cr-toggle>
  </div>
</div>
<script type="module" src="incognito_tab.js"></script>
<script>
  document.querySelector('.learn-more-wrapper a').href =
    "$i18n{learnMoreLink}"
</script>
<!-- Lazy-load cr_elements to avoid performance penalty introduced by loading Polymer -->
<script type="module" src="chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js" async></script>
<script type="module" src="chrome://resources/cr_elements/policy/cr_tooltip_icon.m.js" async></script>
</body>
</html>
